import React, { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Outlet, useNavigate } from 'react-router';
import UserCard from "../components/User/UserCard"
import UserMenu from '../components/User/UserManu';
import {fetchUserFromStorage} from "../utils/storage";
import "./User.scss";

export default function User() {
  const navigate = useNavigate();
  const user = useSelector(state => state.user);
  useEffect(()=>{
    if(!user.name && !fetchUserFromStorage()) {
      navigate("/login");
    }
  });

  return (
    <div className='User-container'>
      <div>
        <UserCard 
          url={user.url}
          name={user.name}
          description={user.description}
          backgroundURL={user.backgroundURL}
        ></UserCard>
        <UserMenu></UserMenu>
      </div>
      <Outlet></Outlet>
    </div>
  )
}
